document.querySelectorAll('[data-description]').forEach(element => {
    element.addEventListener('mouseenter', showDetailsForActionsOnBook.bind(this, element))
})

document.querySelectorAll('[data-description]').forEach(element => {
    element.addEventListener('mouseleave', removeDetailsForActionsOnBook.bind(this, element))
})

function removeDetailsForActionsOnBook(element) {
    // Удаляем пояснительную информацию

    element.querySelector('.window-for-details')?.remove()

}

function showDetailsForActionsOnBook(element) {
    // Показываем подробности для действий над книгой

    document.querySelectorAll('.window-for-details').forEach(element => element.remove())

    if (checkNeedToShow(element)) return;
    const text = element.dataset.description;
    const window = showWindowForDetails(text);
    element.insertAdjacentElement('beforeend', window);
    setPosition(window);
}

function setPosition(window) {
    const halfWidthOfButton = 8;
    window.style.left = -window.clientWidth / 2 + (halfWidthOfButton * 1.5) + 'px';
    window.style.top = -window.clientHeight - halfWidthOfButton +'px';
}

function showWindowForDetails(text) {
    // Показываем окно для отображения пояснительной информации

    const window = document.createElement('div');
    window.className = 'window-for-details';
    window.innerHTML = `<span>${text}</span>`
    return window
}


function checkNeedToShow(element) {
    // Проверяем нужно ли показывать подсказку

    if (element.dataset.description == 'Настройки' &&
        document.querySelector('.book-settings-window')) {
            return true
        }
}